{% extends 'user-base.html' %}

{% load staticfiles %}

{% block custom_css %}
    <style>
        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin-top: 20px;
            margin-left: 20px;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            font-size: 200px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container mycontent" style="padding-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'users:user_info' %}">个人中心</a></li>
            <li class="active">个人资料</li>
        </ol>

        <div class="col-md-3" style="padding-left: 0px;">
            <a href="#" class="list-group-item active">
                个人资料
            </a>
            <a href="{% url 'users:user_friend' %}" class="list-group-item">我的厨友</a>
            <a href="{% url 'users:user_kitchen' %}" class="list-group-item">我的厨房</a>

        </div>
        <div class="col-md-9" style="border: 1px solid #dddddd;padding: 0px;">
            <div class="well">个人信息</div>


            <div class="col-md-3" style="padding-left: 80px;">
                <form enctype="multipart/form-data">
                    <div>
                        <img class="img-circle" id="imgPreview" src="{{ MEDIA_URL }}{{ request.user.image }}"
                             style="height: 120px; width: 120px;">
                        <span class="btn btn-default fileinput-button">
                        <span>修改头像</span>
                        <input type="file" onchange="showPreview(this)" id="input_file">
                    </span>
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"
                                style="margin-left: 20px; margin-top: 20px;">
                            修改密码
                        </button>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             style="margin-top: 100px;">
                            <div class="modal-dialog" role="document" style="width: 440px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close"><span
                                                aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                                    </div>
                                    <form class="form-horizontal" role="form" id="changeForm">
                                        <div class="modal-body">

                                            <div class="form-group" style="height: 40px; padding: 10px;">
                                                <label class="col-sm-3 control-label text-right">新密码</label>
                                                <div class="col-sm-9">
                                                    <input type="password" class="form-control" id="password1"
                                                           name="password1">
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="form-group" style="height: 40px; padding: 10px;">
                                                <label class="col-sm-3 control-label text-right">确认密码</label>
                                                <div class="col-sm-9">
                                                    <input type="password" class="form-control" id="password2"
                                                           name="password2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" id="change-pwd">提交
                                            </button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>


                    </div>
                </form>
            </div>
            <div class="col-md-9">
                <form class="form-horizontal" role="form"
                      action="{% url 'users:user_info' %}" method="post">
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword"
                                   value="{{ request.user.username }}" style="width: 60%" name="username">
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="inputPassword" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword"
                                   value="{{ request.user.email }}" style="width: 60%" name="email">
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="inputPassword" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="optionsRadios3" value="male"
                                       {% if request.user.gender == 'male' %}checked{% endif %}>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="optionsRadios4" value="female"
                                       {% if request.user.gender == 'female' %}checked{% endif %}>女
                            </label>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="inputPassword" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword"
                                   value="{{ request.user.mobile }}" style="width: 60%" name="mobile">
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="inputPassword" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword"
                                   value="{{ request.user.address }}" style="width: 60%" name="address">
                        </div>
                    </div>
                    {% csrf_token %}
                    <input type="submit" class="btn btn-default vertical-center" value="保存"
                           style="margin-left: 107px; margin-bottom: 40px;">
                </form>
            </div>

        </div>
    </div>
    </div>
    <script type="text/javascript">
        function showPreview(imgFile) {
            var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
            filextension = filextension.toLowerCase();
            if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
                alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
                imgFile.focus();
            }
            else {
                var path;
                path = window.URL.createObjectURL(imgFile.files[0]);
                document.getElementById("imgPreview").src = path;
            }
            var formData = new FormData();
            formData.append('file', $('#input_file')[0].files[0]);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
            $.ajax({
                url: "{% url 'users:change_image' %}",
                type: 'POST',
                cache: false, //上传文件不需要缓存
                data: formData,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    if (data.status === 1)
                        alert('修改成功');
                    else
                        alert('修改失败');
                },
                error: function (data) {
                    alert("上传失败");
                }
            })
        }

        $(function () {
            $("#change-pwd").on('click', function () {
                $('#myModal').modal('hide');
                $.ajax({
                    url: "{% url 'users:change_pwd' %}",
                    type: "POST",
                    data: {
                        password1: $('#password1').val(),
                        password2: $('#password2').val(),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        if (data.status === 1)
                            alert('修改成功');
                        else
                            alert('修改失败');
                    },
                    error: function (data) {
                        alert("上传失败");
                    }
                })
            })
        });

    </script>


{% endblock %}